跳到主要内容

解决网站网页html css兼容性问题

总结了在项目设计中遇到的兼容性问题，在此整理出来，以备不时之需。

解决ie8 css :nth-child(4n) 不兼容问题主要是利用硬方法​

第一种：利用first-child,该方法在ie可以使用
.huo_game_ ul li:first-child+li+li+li,
.huo_game_ ul li:first-child+li+li+li+li+li+li+li,
.huo_game_ ul li:first-child+li+li+li+li+li+li+li+li+li+li+li {
  margin-right: 0;
}
//还有一种方法就是利用jq的nth-child
$(".huo_game_ ul li:nth-child(4n)").css("margin-right","0")

解决ie7的高度丢失​

padding 或者 _paddding height _height margin _margin width _width

CSS -webkit-box-orient: vertical 属性编译后丢失问题​

解决方法

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

高斯模糊​

filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
-webkit-filter: blur(1px); /* Chrome, Opera */
-moz-filter: blur(1px);
-ms-filter: blur(1px);  
filter: blur(1px);
/* IE6~IE9 */
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=1, MakeShadow=false);

/*知识点*/
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='x', MakeShadow='x', ShadowOpacity='x')
  • PixelRadius，设置对象的模糊半径，1~100数值。
  • MakeShadow，设置对象是否投影，布尔值，true和false
  • ShadowOpacity，设置对象投影不透明度，0.0~1.0，假如MakeShadow为false那么该值无效。

rgba兼容​

ie8及以下版本

background: rgba(0, 0, 0, .4);
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000, endcolorstr=#66000000);

这个颜色“#66000000”是由两部分组成的。 第一部是#号后面的66。是rgba透明度0.4的IEfilter值。从0.1到0.9每个数字对应一个IEfilter值。对应关系如下：

img

img

即：alpha*255得到的值再转换为16进制即可。

第二部分是7f后面的六位 是六进制的颜色值，跟rgb函数中的取值相同，比如rgb(255,255,255)对应#ffffff。

box-shadow 兼容​

ie8及以下版本

-moz-box-shadow:3px 5px 5px #000;
-webkit-box-shadow:3px 5px 5px #000;
box-shadow:3px 5px 5px #000;

filter: progid:DXImageTransform.Microsoft.Shadow(color=gray, Direction=125, Strength=9);

strength是阴影大小，direction是阴影方位，单位为度，可以为负数，color是阴影颜色 （尽量使用数字） 使用IE滤镜实现盒子阴影的盒子必须是行元素或以行元素显示（block或inline-block;）

filter界面滤镜​

在ie中 filter 分为静态滤镜(Visual Filters)和过渡转场(Transitions Reference)，前者是的效果可以设置元素的不透明度、渐变、模糊、对比度、明度等这些，后者注重的ie的动画效果。

.test{
    filter:progid:DXImageTransform.Microsoft.    /*.后面都是紧跟着各种滤镜和转场函数*/
}

/*如：模糊滤镜*/
.blur{
    filter:progid:DXImageTransform.Microsoft.Blur()    /*.函数的开头第一个字母必须大写，括号()里面的滤镜的各种值*/
}

一般常用Blur,Shadow,Gradient,对应，filter:blur(),box-shadow,rgba();

圆角border-radius兼容​

需要下载PIE.htc 然后css中

/*关键属性设置 需要把路径设置好*/
behavior: url(PIE.htc);